<template>
  <div class="ImgDialog">
    <dialog-x title="选择图片" v-model:show="showD" width="600"
              @close="closeFn" @save="saveFn">
      <div class="imgContent">
        <div class="url item">
          <div class="text">
            <span class="title">图片路径</span>
            <span>
              <el-button class="bn" type="primary" @click="clickFn">选择本地图片</el-button>
            </span>
          </div>
          <div class="value">
            <el-input v-model="imgObj.url" placeholder="请输入图片地址或者选择图片"
                      clearable/>
          </div>
        </div>

        <div class="item size">
          <div class="width">
            <div class="text">宽度</div>
            <div class="value">
              <el-input v-model="sizeObj.width" placeholder="请输入宽度"
                        clearable/>
            </div>
          </div>
          <div class="height">
            <div class="text">高度</div>
            <div class="value">
              <el-input v-model="sizeObj.height" placeholder="请输入高度"
                        clearable/>
            </div>
          </div>
        </div>

        <div class="item img">
          <el-image style="width: 100px; height: 100px" :src="imgObj.url"
                    @error="isOk = false" @load="isOk = true"
                    :preview-src-list="[imgObj.url]"/>
        </div>

        <div class="upload" v-show="false">
          <upload-x2 ref="uploadDom" v-model:list="imgList" accept="image/*" :multiple="false"/>
        </div>
      </div>
    </dialog-x>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import DialogX from '../../element/xhykDialog.vue'
import { ElInput,ElImage } from 'element-plus'

const emit = defineEmits(['save'])

const uploadDom = ref({})

const showD = ref(false)

// 图片是否ok
const isOk = ref(false)

// 宽高
const sizeObj = ref({})

// 图片对象
const imgObj = ref({
  url: ''
})

// upload组件的图片列表
const imgList = ref([])

// 打开弹窗
const openFn = (url = '') => {
  imgObj.value.url = url
  if (url) {
    imgList.value = [url]
  }
  showD.value = true
}

// 关闭弹窗
const closeFn = () => {
  imgObj.value = {url: ''}
  showD.value = false
}

// 保持图片
const saveFn = () => {
  if (!isOk.value) {
    window.$message?.error('图片加载失败！')
    return;
  }
  // 判断是本地还是链接
  const startStr = imgObj.value.url.indexOf('blob:')
  if (startStr != 0){
    // 链接

  }

}

// 选择图片
const clickFn = () => {
  uploadDom.value.open()
}
watch(() => imgList.value, newV => {
  if (newV?.length > 0) {
    const temp = newV[0]
    if (typeof temp == 'string') {
      imgObj.value.url = temp
    } else {
      imgObj.value = temp
    }
  }
}, {immediate: true})

defineExpose({
  open: openFn,
})
</script>

<style scoped lang='scss'>
.item {
  margin-bottom: 10px;

  .text {
    margin-bottom: 10px;
  }
}

.url {
  .bn {
    border-radius: 0px;
  }

  .title {
    margin-right: 10px;
  }
}

.size {
  display: flex;

  .width, .height {
    flex: 0 0 auto;
    width: 270px;
  }

  .width {
    margin-right: 20px;
  }

  .value {
    //padding-right: 20px;
  }
}
</style>